<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>工勤技能岗位技术等级</title>
</head>
<body>
	<!--查询入口页面 -->
    <div id="container"  class="container">
		<div class="header">
<!-- 			<img class="headImage" style="width:100%"
			src="./img/title_logo.jpg" /> -->
			<div class="headTitle">
				<img src="./img/title_logo.jpg" style="vertical-align:middle;width: 15vw;"/>
				<span>电子证书信息查询</span>
			</div>
		</div>
		<div class="main">
			<div class="main-form">
				<table>
					<tr>
						<p>姓名：</p>
						<input  type="text" class="input-text" placeholder="  请输入姓名">
					</tr>
					<tr>
						<p>身份证号：</p>
						<input id='idCard' type="text" class="input-text" placeholder="  请输入身份证号">
					</tr>
					<tr>
						<p>证书编号：</p>
						<input id='certificateNo' type="text" class="input-text" placeholder="  请输入证书编号">
					</tr>
					<tr>
						<input class="input-button" type="button" value="点击查询" onclick="query()">
					</tr>
				</table>
			</div>
		</div>
		<div class="footer">
			<!-- <p>江苏省人事厅机关事业单位工人技术等级考核办公室 主办</p> -->
		</div>
    </div>
	
	<!-- 证书详情页面 -->
	<div id="detailContainer" class="detailContainer">
		<div class="detailHeader">
			<img src="./img/title_logo.jpg" style="vertical-align:middle;width: 10vw;"/>
			<span style="font-size: larger;font-weight: bold;">证书详情</span>
		</div>
		<div class="detailMain">
			<p>姓名: <span id="username"></span></p>
			<p>性别: <span id="sex"></span></p>
			<p>出生年月: <span id="birthday"></span></p>
			<p>身份证号: <span id="detailIdCard"></span></p>
			<p>工作单位: <span id="unitName"></span></p>
			<p>行业: <span id="industy"></span></p>
			<p>工种: <span id="workType"></span></p>
			<p>证书编号: <span id="detailCertficateNo"></span></p>
			<p>取得资格时间: <span id="time"></span></p>
			<p>发文字号: <span id="postName"></span></p>
		</div>
	</div>
	<style>
	    *,body{
	        padding: 0;
	        margin: 0;
			border: 0;
	    }
		input{
			border: 0;
			margin: 0;
			padding: 0;
		}
	    .container{
	        width: 100%;
			height: 100vh;
			justify-content: center;
			align-items: center;	
		    background: url(./img/logo_bg_img.jpg) no-repeat;
			background-size:100% 100%; 
			display: block;
	    }
	    .header{
			height: 15vh;
		}
		.headImage{
			width: 100%;
			height:100%;
		}
		.headTitle{
			width: 80vw;
			font-size:larger;
			text-align: center;
			margin-left: 8vw;
			padding-top: 10vh;
		}
		.main{
			height: 60vh;
		}
		.main-form{
			width: 90vw;
			height:40vh;
			background-color: rgb(231, 235, 240);
			margin-left: 5vw;
			margin-top: 10vh;
			border-radius: 5px;
		}
		.main-form p{
			margin-left: 5vw;
			padding-top: 3vh;
			font-size: small;
		}
		.input-text{
			height: 5vh;
			width: 80vw;
			margin-left:5vw;
			margin-top: 2vh;
			border-radius: 5px;
		}
		.input-button{
			height: 5vh;
			width: 80vw;
			margin-left: 5vw;
			margin-top: 5vh;
			border-radius: 5px;
			background-color: rgb(51, 170, 219);
			font-size: large;
			color: white;
		}
		.footer{
			height: 10vh;
			/* background-color: rgb(2, 86, 143); */
		}
		.footer p{
			font-size: small;
			text-align: center;
			padding-top: 2vh;
		}
		
		/* 证书详情样式 */
		.detailContainer{
			width: 100%;
			height: 100vh;
			justify-content: center;
			align-items: center;	
			background: url(./img/logo_bg_img.jpg) no-repeat;
			background-size:100% 100%; 
			display: none;
		}
		.detailHeader{
			height: 10vh;
			padding-top: 5vh;
		}
		.detailMain{
			width: 90vw;
			padding-left: 5vw;
			font-size: large;
		}
		.detailMain p{
			margin-top: 2vh;
		}
		.detailMain span{
			color: gray;
		}
	</style>
<script>
   /*ajax封装-get
          @param url:请求的路径
          @param data:发送的数据,格式:key1=value1&key2=value2
          @param callback:回调函数,方便用户处理自己的数据,传递逻辑
   */
   function get(url, data, callback){
          //创建异步对象
          var xhr = new XMLHttpRequest();
          //判断data是否为空
          if(data){
              url=url+'?'+data;
          }
          //设置请求行
          xhr.open('get',url);
          //设置请求头(get可以省略)
          //注册回调函数
          xhr.onreadystatechange = function(){
               if(xhr.readyState==4&&xhr.status==200){
                   //调用传递的回调函数
                   callback(xhr.responseText);
               }
          }
          //发送请求主体
          xhr.send(null);
   }

	/**
	 * 查询证书
	 */
	function query(){
		var idCard = document.getElementById("idCard").value;
		var certificateNo = document.getElementById("certificateNo").value;
		var params = 'idCard=' + idCard + '&certificateNo=' + certificateNo;
		// 判断输入是否为空
		if(idCard == "" || idCard == null || certificateNo == "" || certificateNo == null){
			alert("身份证号和证书编号不能为空！")
		}else if(idCard.length > 18 || certificateNo > 10){
			alert("身份证号或证书编号输入过长！")
		}
		else{
			get('https://www.jsrcxxg.com/api/f/gkb/certificate/quertCertByIdCardAndCertificateNo',params,function(result){
				var data = JSON.parse(result)
				console.log(data)
				if(data.code == 0 && data.data != null){
					document.getElementById("container").style.display = "none"
					document.getElementById("detailContainer").style.display = "block"
					document.getElementById("username").innerHTML = data.data.personName;
					document.getElementById("sex").innerHTML = data.data.sex;
					var birthday = data.data.birthday;
					var strArray = birthday.split("-");
					document.getElementById("birthday").innerHTML = strArray[0] + "-" + strArray[1];
					document.getElementById("detailIdCard").innerHTML = data.data.idCard;
					document.getElementById("unitName").innerHTML = data.data.unitName;
					document.getElementById("industy").innerHTML = data.data.typeName;
					document.getElementById("workType").innerHTML = data.data.workTypeName;
					document.getElementById("detailCertficateNo").innerHTML = data.data.cretficateNo;
					document.getElementById("time").innerHTML = data.data.cretficateDate;
					document.getElementById("postName").innerHTML = data.data.postShopName;
				}else{
					alert("未查到证书信息！")
				}
			});	
		}
	} 
</script>
</body>
</html>